<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/styleCJ.css" />

	</head>

	<body>
		<div id="title">
			<h1>链家抽奖活动</h1>
			<h3>您还有&nbsp;<span class="totle">3</span>&nbsp;次抽奖机会</h3>
		</div>
		<div class="price">您还未获得任何奖品</div>
		<div class="shanDeng" id="deng">
			<div id="luck">
				<!-- luck -->
				<table>
					<tr>
						<td class="luck-unit luck-unit-0"><img src="./img/01.jpg"></td>
						<td class="luck-unit luck-unit-1"><img src="./img/02.jpg"></td>
						<td class="luck-unit luck-unit-2"><img src="./img/03.jpg"></td>
						<td class="luck-unit luck-unit-3"><img src="./img/01.jpg"></td>
					</tr>
					<tr>
						<td class="luck-unit luck-unit-11"><img src="./img/03.jpg"></td>
						<td rowspan="2" colspan="2" class="cjBtn" id="btn"></td>
						<td class="luck-unit luck-unit-4"><img src="./img/03.jpg"></td>
					</tr>
					<tr>
						<td class="luck-unit luck-unit-10"><img src="./img/01.jpg"></td>
						<td class="luck-unit luck-unit-5"><img src="./img/02.jpg"></td>
					</tr>
					<tr>
						<td class="luck-unit luck-unit-9"><img src="./img/02.jpg"></td>
						<td class="luck-unit luck-unit-8"><img src="./img/03.jpg"></td>
						<td class="luck-unit luck-unit-7"><img src="./img/02.jpg"></td>
						<td class="luck-unit luck-unit-6"><img src="./img/01.jpg"></td>
					</tr>
				</table>
			</div>
			<!-- luckEnd -->
		</div>

		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

		<script>
			var luck = {
				index: -1, //当前转动到哪个位置，起点位置
				count: 0, //总共有多少个位置
				timer: 0, //setTimeout的ID，用clearTimeout清除
				speed: 20, //初始转动速度
				times: 0, //转动次数
				cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
				prize: -1, //中奖位置
				init: function(id) {
					if($("#" + id).find(".luck-unit").length > 0) {
						$luck = $("#" + id);
						$units = $luck.find(".luck-unit");
						this.obj = $luck;
						this.count = $units.length;
						$luck.find(".luck-unit-" + this.index).addClass("active");
					};
				},

				roll: function() {
					var index = this.index;
					var count = this.count;
					var luck = this.obj;
					$(luck).find(".luck-unit-" + index).removeClass("active");
					index += 1;
					if(index > count - 1) {
						index = 0;
					};
					$(luck).find(".luck-unit-" + index).addClass("active");
					this.index = index;
					return false;
				},
				stop: function(index) {
					this.prize = index;

					return false;
				}
			};

			function roll() {
				luck.times += 1;
				luck.roll();
				if(luck.times > luck.cycle + 10 && luck.prize == luck.index) {
					clearTimeout(luck.timer);
					luck.prize = -1;
					luck.times = 0;
					click = false;
				} else {
					if(luck.times < luck.cycle) {
						luck.speed -= 10;
					} else if(luck.times == luck.cycle) {
						var index = Math.random() * (luck.count) | 0;
						luck.prize = index;
					} else {
						if(luck.times > luck.cycle + 10 && ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
							luck.speed += 110;
						} else {
							luck.speed += 20;
						}
					}
					if(luck.speed < 40) {
						luck.speed = 40;
					};

					luck.timer = setTimeout(roll, luck.speed);

				}
				console.log(1)

				return false;

			}

			//闪灯效果
			var num = 0;
			$(".shanDeng").attr("class", function() {
				setInterval(function() {
					num++;
					if(num % 2 == 0) {
						$('#deng').addClass("shanDeng2");
					} else {
						$('#deng').addClass("shanDeng");
						$('#deng').removeClass('shanDeng2');
					}
				}, 500)

			})

			var click = false;
			window.onload = function() {
				luck.init('luck');
				$("#btn").click(function() {
					//按下弹起效果
					$("#btn").addClass("cjBtnDom");
					setTimeout(function() {
						$("#btn").removeClass("cjBtnDom");
					}, 200);

					if(click) {
						return false;
					} else {
						luck.speed = 100;
						roll();
						click = true;
						console.log()

						return false;

					}

				});
			};
		</script>
		<script type="text/javascript">
			$(function() {
				var count = $(".totle").html();
				$("#btn").click(function() {
					$(".price").html("您还未获得任何奖品")
					count--;
					$(".totle").html(count);
					setTimeout(function() {
						for(var i = 0; i < 12; i++) {
							if($(".luck-unit-" + i).hasClass("active")) {
								console.log($(".luck-unit-" + i));
								if(i == 0||i==3||i==6||i==10){
									$(".price").html("恭喜你获得了链家logo制式便签")
								} else if ( i ==1||i==5||i==7||i==9){
									$(".price").html("恭喜你获得了链家精美名片盒")
								} else {
									$(".price").html("恭喜你获得了链家制式领带")
								}
							}
						}
					}, 8000)
					if(count == 0) {
						$("#title>h3").html("没有抽奖机会了");
						$("#btn").css("pointer-events", "none")
						return;
					}
				})
			})
		</script>
	</body>

</html>